﻿<!--@jQuery-->
<div id="chartContainer"></div>
<div class="inline" style="text-align:center">
    <div>commonAxisSettings | maxValueMargin:&nbsp;</div>
    <div id="sliderContainer"></div>
</div>
<!--/@jQuery-->
<!--@Knockout-->
<div id="chartContainer" data-bind="dxChart: {
    dataSource: data,
    commonSeriesSettings: {
        argumentField: 'year'
    },
    series: [
        { valueField: 'europe', name: 'Europe' },
        { valueField: 'americas', name: 'Americas' },
        { valueField: 'africa', name: 'Africa' }
    ],
    animation: false,
    valueAxis: {
        label: { format: 'largeNumber' }
    },
    commonAxisSettings: {
        grid: { visible: true },
        visible: true,
        maxValueMargin: sliderValue
    }
}"></div>
<div class="inline" style="text-align:center">
    <div>commonAxisSettings | maxValueMargin:&nbsp;</div>
    <div id="sliderContainer" data-bind="dxSlider: {
        min: 0.01, max: 1,
        step: 0.01,
        label: { visible: true },
        showRange: false,
        value: sliderValue
    }"></div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="chartController">
    <div id="chartContainer" dx-chart="{
        dataSource: data,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        commonAxisSettings: {
            grid: { visible: true },
            visible: true
        },
        bindingOptions: {
            'commonAxisSettings.maxValueMargin': 'sliderValue'
        }
    }"></div>
    <div class="inline" style="text-align:center">
        <div>commonAxisSettings | maxValueMargin:&nbsp;</div>
        <div id="sliderContainer" ng-model="sliderValue" dx-slider="{
            min: 0.01, max: 1,
            step: 0.01,
            label: { visible: true },
            showRange: false
        }"></div>
    </div>
</div>
<!--/@AngularJS-->